<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>litegl.js: Quad example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type='text/css'>
		html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
		body { background-color: #DDD;}
		h1 { color: #777; background-color: #CCC; }
	</style>
	<script type="text/javascript" src="../external/gl-matrix.js"></script>
	<script type="text/javascript" src="../build/litegl.js"></script>
	<script type="text/javascript">
	
	function init()
	{
		//create the rendering context
		var container = document.body;

		var gl = GL.create({width: container.offsetWidth, height: container.offsetHeight});
		container.appendChild(gl.canvas);
		gl.animate();
		gl.captureMouse();
		var pos = [0,0];


		//build the mesh
		var texture = GL.Texture.fromURL("texture.png",{temp_color:[80,120,40,255], minFilter: gl.LINEAR_MIPMAP_LINEAR});

		//basic distort shader
		var shader = new Shader( Shader.SCREEN_VERTEX_SHADER, "\
			precision highp float;\n\
			uniform sampler2D texture;\n\
			uniform float u_time;\n\
			uniform vec2 u_mousepos;\n\
			varying vec2 v_coord;\n\
			void main() {\n\
				vec2 n = (v_coord - u_mousepos);\n\
				float l = length(n);\n\
				n /= l;\n\
				vec2 uv = v_coord - n * 0.1;\n\
				gl_FragColor = texture2D(texture, uv);\n\
			}\n\
		");


		//rendering loop
		gl.ondraw = function()
		{
			//render mesh using the shader
			texture.bind(0);
			shader.toViewport({
				u_texture: 0,
				u_time: getTime() * 0.001,
				u_mousepos: [pos[0]/gl.canvas.width,pos[1]/gl.canvas.height]
			});
		};

		gl.onmousemove = function(e)
		{
			pos[0] = e.canvasx;
			pos[1] = e.canvasy;
		}
	}	
	
	</script>
</head>
<body>
<script>init();</script>
</body>
</html>


